﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Html5Canvas.aspx.cs" Inherits="BugSysSolution.HTML5.Html5Canvas" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divinfo span {
            color: red;
        }

        #getAllInfo span {
            color: black !important;
        }
    </style>
    <script src="../Javascript/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="float: left; position: absolute;">
            <div>
                <canvas id="mycanvas" style="border: 1px solid red;" width="800" height="600"></canvas>
            </div>
            <div>
                <input type="button" id="btnLine" value="Line" />
                <input type="button" id="btnRect" value="Rect" />
                <input type="button" id="btnranDraw" value="RanDraw" />
                <input type="button" id="btnSelector" value="Selector" />
                <input type="button" id="btnClear" value="Clear" />
            </div>
        </div>
        <div id="divinfo" style="border: 1px solid red; width: 400px; height: 400px; position: absolute; left: 1000px;">
            当前的操作是:<span id="span1"></span><br />
            当前鼠标移动位置:<span id="span2"></span><br />
            当前画板的线条数量:<span id="span3">0</span><br />
            当前画板的矩形数量:<span id="span4">0</span><br />
            当前画板的随笔数量:<span id="span5">0</span><br />
            <input type="button" id="GetInfo" value="GetInfo" />
            <div id="getAllInfo" style="border: 1px solid blue; width: 400px; height: 260px"></div>
        </div>
    </form>
</body>
</html>

<script type="text/javascript">
    //画的图形的标识
    var _drawtag = "";
    //是否渲染--为了在mouseup的时候释放CPU资源
    var _isRender = false;
    //是画还是move
    var _isDraw = false;
    var _isSelect = false;

    var SetRandom = function (num1, num2) {
        var choices = num2 - num1 + 1;
        return Math.floor(Math.random() * choices + num1);
    }

    var xshape = function () {

        this._canvas = document.getElementById("mycanvas");
        this._context = this._canvas.getContext("2d");
        this._width = 800;
        this._height = 600;

        this._lineWidth = 1;
        this._color = "red";

        this._context.strokeStyle = "red";
        this._context.lineWidth = 1;

        this.setlineWidth = function (num) {
            this._context.lineWidth = num;
        }

        this.setStrokeStyle = function (color) {
            this._context.strokeStyle = color;
        }

        //渲染方法
        this.onRender = function () {

        }
        /*
        一些需要用到的变量
        */
        //画图的时候,鼠标移动开关
        this._movetag = false;
        //临时对象
        this._tempElement = null;
        //选择的图形对象
        this._selImg = null;
    }

    var shapeEngine = function () {

        this._dataItems = new Array();

        this.add = function (item) {
            this._dataItems.push(item);
        }

        this.init = function () {
            setInterval(function () { if (_isRender) { engine.onRender(); } }, 1);
        }

        this.onRender = function () {
            this._context.clearRect(0, 0, this._width, this._height);
            var that = this;

            for (var i = 0; i < this._dataItems.length; i++) {
                this._dataItems[i].onRender(that._context);
            }
        }

        this.clear = function () {
            _drawtag = "";
            this._dataItems.length = 0;
        }
    }

    var xline = function (x1, y1, x2, y2) {

        xshape.apply(this, arguments);


        this._startPos = { x: x1, y: y1 };
        this._endPos = { x: x2, y: y2 };
        this._type = "line";

        this.to = function (toX, toY) {
            this._endPos = { x: toX, y: toY };
        }

        this.onRender = function () {
            this._context.save();
            this._context.strokeStyle = this._color;
            this._context.lineWidth = this._lineWidth;
            this._context.beginPath();
            this._context.moveTo(this._startPos.x, this._startPos.y);
            this._context.lineTo(this._endPos.x, this._endPos.y);
            this._context.closePath();
            this._context.stroke();
            this._context.restore();
        }
    }

    var xRect = function (x, y) {
        xshape.apply(this, arguments);

        this._lineWidth = 1;

        this._type = "rect";
        this._startPos = { x: x, y: y };
        this._width = 0;
        this._height = 0;
        this.onRender = function () {
            this._context.save();

            this._context.strokeStyle = this._color;
            this._context.lineWidth = this._lineWidth;
            this._context.beginPath();
            this._context.fillStyle = this._fillcolor;
            this._context.rect(this._startPos.x, this._startPos.y, this._width, this._height);
            this._context.closePath();
            this._context.fill();
            this._context.stroke();
            this._context.restore();
        }

        this.setSize = function (x, y) {
            this._width = x - this._startPos.x;
            this._height = y - this._startPos.y;
        }
    }

    var xranLine = function (x, y) {

        xshape.apply(this, arguments);

        this._type = "ranline";
        this._startPoint = { x: x, y: y };
        this._endPoint = { x: x, y: y };
        this._pointArr = new Array();
        this._pointArr.push(this._startPoint);
        this.setEndPoint = function (x1, y1) {
            this._endPoint = { x: x1, y: y1 };
            this._pointArr.push({ x: x1, y: y1 });
        }
        this.onRender = function () {
            for (var i = 1; i < this._pointArr.length; i++) {
                this._context.save();
                this._context.strokeStyle = this._color;
                this._context.lineWidth = this._lineWidth;
                this._context.beginPath();
                this._context.moveTo(this._pointArr[i - 1].x, this._pointArr[i - 1].y);
                this._context.lineTo(this._pointArr[i].x, this._pointArr[i].y);
                this._context.closePath();
                this._context.stroke();
                this._context.restore();
            }
        }
    }

    var selector = function () {
        var temppoint = { x: 0, y: 0 };

        this.move = function (x, y, obj) {
            if (obj._type == "rect") {
                obj._startPos.x = x;
                obj._startPos.y = y;
            }
        }

        this.checkPoint = function (x1, y1) {
            var p1 = that._startPos;
            var p2 = { x: that._startPos.x + that._width, y: that._startPos.y + that._height };
            if (x1 > p1.x && x1 < p2.x && y1 > p1.y && y1 < p2.y) {
                return true;
            }
            return false;
        }
    }

    var event = function (sender) {
        this._sender = sender;
        this._listeners = [];
    }

    event.prototype.attach = function (handler) {
        if (typeof handler == "function") {
            this._listeners.push(handler);
        }
    }

    event.prototype.notify = function () {
        for (var i = 0, ci; ci = this._listeners[i]; i++) {
            ci.apply(this._sender, arguments);
        }
    }

    var _event = new event();
    _event.attach(function (e) {
        var colors = ["red", "green", "blue", "yellow", "gray", "black"];
        var linewidth = [1, 2, 3, 4, 5, 6];
        var ran = SetRandom(0, 6);
        if (_isDraw) {
            _isRender = true;
            engine._movetag = true;
            if (_drawtag == "line" && engine._tempElement == null) {
                $("#span1").text("画线");
                engine._tempElement = new xline(e.pageX, e.pageY, e.pageX, e.pageY);
                engine._tempElement._lineWidth = ran;
                engine._tempElement._color = colors[ran];
                engine.add(engine._tempElement);
                return;
            }
            else if (_drawtag == "rect" && engine._tempElement == null) {
                $("#span1").text("画矩形");
                engine._tempElement = new xRect(e.pageX, e.pageY);
                engine._tempElement._lineWidth = ran;
                engine._tempElement._color = colors[ran];
                engine._tempElement._fillcolor = colors[ran];
                engine.add(engine._tempElement);
                return;
            }
            else if (_drawtag == "ranLine" && engine._tempElement == null) {
                $("#span1").text("涂鸦");
                engine._tempElement = new xranLine(e.pageX, e.pageY);
                engine._tempElement._lineWidth = ran;
                engine._tempElement._color = colors[ran];
                engine.add(engine._tempElement);
                return;
            }
        }
        if (_isSelect) {
            $("#span1").text("移动矩形");

            var _rectItems = new Array();
            for (var i = 0; i < engine._dataItems.length; i++) {
                if (engine._dataItems[i]._type == "rect") {
                    _rectItems.push(engine._dataItems[i]);
                }
            }
            for (var i = 0; i < _rectItems.length; i++) {
                if (e.pageX > _rectItems[i]._startPos.x
                    && e.pageY > _rectItems[i]._startPos.y
                    && e.pageX < _rectItems[i]._startPos.x + _rectItems[i]._width
                    && e.pageY < _rectItems[i]._startPos.y + _rectItems[i]._height) {
                    engine._selImg = _rectItems[i];
                    break;
                }
            }
        }
    });

    var _eventmove = new event();
    _eventmove.attach(function (e) {
        if (_isDraw) {
            if (engine._movetag == false) {
                return;
            }
            if (_drawtag == "line" && engine._tempElement._type == "line") {
                engine._tempElement.to(e.pageX, e.pageY);
            }
            else if (_drawtag == "rect" && engine._tempElement._type == "rect") {
                engine._tempElement.setSize(e.pageX, e.pageY);
            }
            else if (_drawtag == "ranLine" && engine._tempElement._type == "ranline") {
                engine._tempElement.setEndPoint(e.pageX, e.pageY);
            }
        }
        if (_isSelect && engine._selImg != null) {
            var tempsel = new selector();
            tempsel.move(e.pageX, e.pageY, engine._selImg);
        }
    });

    var _canvseEventTool = function () {
        this.init = function () {
            document.querySelector("#mycanvas").onmousedown = function (e) {
                $("#span2").text("x:" + e.pageX + "  y:" + e.pageY);
                _event.notify(e);
            }

            document.querySelector("#mycanvas").onmousemove = function (e) {
                $("#span2").text("x:" + e.pageX + "  y:" + e.pageY);
                _eventmove.notify(e);
            }

            document.querySelector("#mycanvas").onmouseup = function (e) {
                engine._selImg = null;
                _isRender = false;
                engine._movetag = false;
                engine._tempElement = null;
                engine._tempElement = null;
                engine._tempElement = null;
                var num1 = 0;
                var num2 = 0;
                var num3 = 0;
                for (var i = 0; i < engine._dataItems.length; i++) {
                    if (engine._dataItems[i]._type == "line") {
                        num1++;
                    } if (engine._dataItems[i]._type == "rect") {
                        num2++;
                    } if (engine._dataItems[i]._type == "ranline") {
                        num3++;
                    }
                }
                $("#span3").text(num1);
                $("#span4").text(num2);
                $("#span5").text(num3);
            }
        }
    }

    xline.prototype = new xshape();
    xRect.prototype = new xshape();
    xranLine.prototype = new xshape();
    shapeEngine.prototype = new xshape();

    var engine = new shapeEngine();
    engine.init();
    var tools = new _canvseEventTool();
    $("#btnLine").click(function () {
        _isDraw = true;
        _isSelect = false;
        _drawtag = "line";
        tools.init();
    })
    $("#btnRect").click(function () {
        _isDraw = true;
        _isSelect = false;
        _drawtag = "rect";
        var rect = new xRect();
        tools.init();
    })

    $("#btnranDraw").click(function () {
        _isDraw = true;
        _isSelect = false;
        _drawtag = "ranLine";
        tools.init();
    })

    $("#btnClear").click(function () {
        _isRender = true;
        engine.clear();
    })

    $("#btnSelector").click(function () {
        _isRender = true;
        _isDraw = false;
        _isSelect = true;
        tools.init();
    })

    document.querySelector("#GetInfo").onclick = function () {
        document.querySelector("#getAllInfo").innerHTML = "";
        var data = engine._dataItems;
        var html = "";
        for (var i = 0; i < data.length; i++) {
            if (data[i]._type == "line") {
                html += "<span>线条[" + (i + 1) + "]的StartPoint:x:" + data[i]._startPos.x + ", y:" + data[i]._startPos.y + ",EndPoint:x:" + data[i]._endPos.x + ", y:" + data[i]._endPos.y + ", color:" + data[i]._color + ", linewidth:" + data[i]._lineWidth + "</span><br>";
            }
            if (data[i]._type == "rect") {
                html += "<span>矩形[" + (i + 1) + "]的StartPoint:x:" + data[i]._startPos.x + ", y:" + data[i]._startPos.y + ",width:" + data[i]._width + ",height:" + data[i]._height + ", color:" + data[i]._color + ", linewidth:" + data[i]._lineWidth + "</span><br>";
            }
            if (data[i]._type == "ranline") {
                html += "<span>涂鸦[" + (i + 1) + "]的StartPoint:x:" + data[i]._startPoint.x + ", y:" + data[i]._startPoint.y + ",EndPoint:x:" + data[i]._endPoint.x + ", y:" + data[i]._endPoint.y + ", color:" + data[i]._color + ", linewidth:" + data[i]._lineWidth + "</span><br>";
            }
        }

        document.querySelector("#getAllInfo").innerHTML = html;
    }
</script>
